<template>
	<!-- 服务进度 -->
	<view class="">
		<view class="back2" v-if="[listInfo].length>0" style="padding-top: 1rpx;">
			<view class="mar box br-a content white-bac" v-for="(item,index) in [listInfo]" :key="index"
				:class="messageTemplate==2?'send-content d-a-center':''">
				<view class="d-j-bet user-order-top" style="" v-if="messageTemplate!=2">
					<!-- 服务名称 -->
					<view class="text-b omit" style="width: 80%;">
						{{item.serviceName}}
					</view>
					<!-- 服务状态 -->
					<view class="text-a co-l">
						{{orderStatus(item.status)}}
					</view>
				</view>
				<view class="d-a-center" style="height: 75%;width: 100%;">
					<view class="change-flex d-j-bet wid-ten box hei-ten"
						:style="messageTemplate==2?'padding: 0 2% 0 2%;':'padding:3%;'">
						<view class="" v-if="messageTemplate!=2">
							{{item.name}}
						</view>
						<view class="text-a co-f omit" v-if="messageTemplate==2">
							{{item.serviceName}}
						</view>
						<!-- 服务时间 -->
						<view class="text-a co-h">
							{{item.scheduleTime}}
						</view>
						<view class="d-j-bet d-a-center">
							<!-- 服务价格 -->
							<view class="text-g co-f">
								¥{{item.price}}
							</view>
							<!-- 操作按钮，目前分为服务进度中的查看详情和弹窗中的发送服务 -->
							<view class="co-white d-center blue-bac action-btn br-e"
								@click="serviceAction(actionName,item.number,item.status,index)"
								v-if="messageTemplate==1||messageTemplate==0">
								{{actionName}}
							</view>
							<!-- 服务状态 -->
							<view class="text-a co-l" v-if="messageTemplate==2">
								{{orderStatus(item.status)}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="" v-else style="padding-top: 30%;">
			<view class="d-center ">
				<image src="../../../static/none/order.png" style="width: 50%;" mode="widthFix"></image>
			</view>
			<view class="d-j-center mar-t">暂无更多订单</view>
		</view>
	</view>

</template>

<script>
	import {
		nurseSelectOrderList
	} from '@/apis/order/index.js'
	import socket from "../../../common/js/socket.js"
	export default {
		props: {
			actionName: {
				type: String,
				default: ''
			},
			listInfo: {
				type: Object,
				default: ()=>{}
			},
			messageTemplate: {
				type: Number,
				default: 0
			},
			sendId: {
				type: String,
				default: ''
			},
			filterStatus: {
				type: Number,
				default: 0
			},
			orderNum: {
				type: Number,
				default: 1
			},
		},
		watch: {
			orderNum(newCount, oldCount) {
				console.log(newCount, oldCount);
				if (newCount > 1) {
					this.selectSource = true
					this.orderNum = this.orderNum
					this.init()
				}
			}
		},
		data() {
			return {
				// 用户订单
				orderList: [],
				page: {
					nurseCity: this.$store.state.userInfo.address,
					nurseId: this.$store.state.userInfo.id,
					pageNum: 1,
					pageSize: 10,
					status: '',
				},
				socketTask: null,
				more: 'loading',
				isReachBottom: false,
				selectSource: false,
			}
		},
		mounted() {
			this.init()
		},
		onReachBottom() {},
		// beforeMount() {
		// 	uni.$on('onReachBottom', () => {
		// 		if (this.more == 'noMore') return
		// 		// 显示加载更多数据
		// 		this.isReachBottom = true
		// 		this.more = 'loading'
		// 		this.page.pageNum++
		// 		this.init()
		// 	})
		// },
		destroyed() {
			uni.$off('onReachBottom')
		},
		methods: {
			async init() {
				if (this.messageTemplate == 2 && this.actionName == 'onlyone') {
					// 只能筛选出一个
					this.orderList = []
					this.$nextTick(()=>{
						this.orderList.push(JSON.parse(this.listInfo))
						console.log('shanxuanchulaide ', this.orderList);
					})
				} else {
					if (this.selectSource) {
						this.page.pageNum = this.orderNum
					}
					// console.log('messageTemplate', this.messageTemplate);
					// 从中选择一个发送的消息
					let res = await nurseSelectOrderList(this.page)
					if (res.success) {
						let list = res.object.records
						// console.log('llllllllll', this.sendId, this.messageTemplate);
						this.$emit('sendOrderSize', list.length)
						// console.log('订单进度中所有订单第一页10-----------', this.orderList);
						if (list.length > 0) {
							// 默认为false,不是弹窗中的列表
							if (!this.selectSource) {
								if (!this.isReachBottom) {
									this.orderList = list
								} else if (this.more == 'loading') {
									this.orderList.push(...list)
								} else {
									this.orderList = list
									this.more = 'loading'
									this.isReachBottom = false
								}
							} else {
								// 弹窗中的触底加载分页
								this.orderList.push(...list)
							}
						} else {
							if (!this.selectSource) {
								if (this.isReachBottom) {
									this.more = 'noMore'
									this.page.pageNum = 1
								} else {
									this.orderList = []
									this.isReachBottom = false
								}
							} else {

							}
						}
						uni.stopPullDownRefresh()
					}
				}
				console.log('订单进度中所有订单第一页-----------', this.orderList);
			},
			serviceAction(actionName, number, status, index) {
				// value:查看详情和发送两种情况
				if (actionName == '查看详情') {
					uni.navigateTo({
						url: '../order/sub-order/sub-order?number=' + number + '&status=' + status
						// url: '../../order/sub-order/sub-order?number=' + number + '&status=' + status
					})
				} else if (actionName == '发送') {
					let msg = JSON.stringify(this.orderList[index])
					// 成功后向父组件中传值
					this.$emit('sendClickStatus', msg)
				}
			},
			orderStatus(status) {
				let title = '';
				switch (status) {
					case 1:
						title = '待付款';
						break;
					case 2:
						title = '待接单';
						break;
					case 3:
						title = '进行中';
						break;
					case 4:
						title = '进行中'; //服务中
						break;
					case 5:
						title = '已完成';
						break;
					case 6:
						title = '已取消';
						break;
					case 7:
						title = '已退款';
						break;
					case 9:
						title = '进行中'; //待审核
						break;
					case 10:
						title = '进行中'; //已拒绝
						break;
				}
				return title;
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 95%;
		height: 270rpx;
		padding: 3%;
		margin-top: 3%;
	}

	.user-order-top {
		border-bottom: 2rpx solid ghostwhite;
		height: 25%;
	}

	.send-content {
		height: 220rpx;
		width: 98%;
		padding: 0 2% 0 2%;
	}
</style>